import './index.less'

import { connect, useSelector, useDispatch } from 'react-redux'


// 使用react-redux，我知道的有两种用法，一种是导入useSelector, useDispatch，
// 另一种是使用connect,可以通过函数组件的props获取到
import { useEffect } from 'react'


const Demo1 = (props) => {
    document.title = '融合/滤镜'

    // 第一种获取和修改
    const dispatch = useDispatch()
    const store = useSelector(store => store)

    useEffect(() => {
        dispatch({
            type: '1',
            name: '难啊难'
        })
    }, [])
    return (
        <>
            <div className='demo1-box'>
                <div className='box1'></div>
                <div className='box2'></div>
            </div>
        </>
    )
}



// 第二种获取和修改
const mapState = (state) => {
    return state
}

const mapAction = (action) => {
    return {
        handleName: (name) => {
            action({
                type: '1',
                name: name
            })
        }
    }

}

export default connect(mapState, mapAction)(Demo1)